import ReactDOM from 'react-dom'
import './index.scss'
import { CloseCircleOutlined } from '@ant-design/icons'
const GlobalDialog: React.FC<{
    children?: any[]
    title?: string
    className?: string
    onClose?: () => void
}> = (props) => {
    // 底部组件的索引 用于判断有没有传过来底部组件
    const footerIndex =
        props.children?.findIndex((item) => item.key === 'footer') || -1
        console.log(props.children, footerIndex);
        
    return ReactDOM.createPortal(
        <div className={`global-dialog-bg`} onClick={props.onClose}>
            <div
                className={`dialog ${props.className}`}
                onClick={(e) => e.stopPropagation()}
            >
                {/* 关闭按钮 */}
                <CloseCircleOutlined
                    className='dialog-close'
                    onClick={props.onClose}
                />
                {/* 弹窗标题 */}
                <div className='dialog-title'>{props.title || '提示'}</div>
                {/* 弹窗内容 */}
                {props.children?.length &&
                    props.children.filter((item) => item.key !== 'footer')}
                {/* 弹窗底部 */}
                {footerIndex >= 0 && (
                    <div
                        className={`dialog-footer ${
                            (props.children as any[])[footerIndex].props
                                .className || ''
                        }`}
                    >
                        {(props.children as any[])[footerIndex].props.children}
                    </div>
                )}
            </div>
        </div>,
        document.body
    )
}

export default GlobalDialog
